<template>
    <div class="app">
        <div class="card">
            <!-- 一个小提示-->
            <div style="position: relative; display: inline-block;">
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-52%, -105%);">
                    <el-tooltip class="item" effect="dark" content="欢迎使用图片压缩工具! 仅支持上传.jpg.png.jpeg格式"
                                placement="top-start">
                        <el-button class="tip-button" style="color: #FFC200; font-size: 15px;">
                            <i class="el-icon-thumb" style="font-size: 19px"></i>
                        </el-button>
                    </el-tooltip>
                </div>
            </div>

            <el-form label-width="100px">
                <el-form-item label="上传图片">
                    <!--**********上传组件开始***********-->
                    <el-upload
                        class="picture-uploader"
                            action="/api/image/upload"
                            name="file"
                            :accept="'.jpg,.png,.jpeg'"
                            :show-file-list="false"
                            :on-success="handleSuccess"
                    >
                        <i class="el-icon-upload picture-uploader-icon" v-if="!dialogImageUrl"></i>
                        <img :src="dialogImageUrl" v-if="dialogImageUrl" style="width: 145px;height: 145px">
                    </el-upload>
                    <!--**********上传组件结束***********-->
                </el-form-item>

                <el-form-item label="大小和质量">
                    <div class="tableBar">
                        <el-input placeholder="请输入预期大小" v-model="img.size" style="width: 200px"></el-input>
                        <el-input placeholder="请输入压缩质量(建议<1)" v-model="img.ratio"
                                  style="width: 200px"></el-input>
                        <el-button type="primary" @click="compress()">
                            压缩图片
                            <i class="el-icon-arrow-down"></i>
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="压缩后(预览)" v-if="imgUrl">
                    <div class="img-container" @click="handlePreview">
                        <img :src="imgUrl" style="width: 145px;height: 145px;border-radius: 10px;" alt="">
                    </div>
                    <div>原本大小：{{ originSize.toFixed(2) }} kb 压缩后大小：{{ compressedSize.toFixed(2) }} kb</div>
                </el-form-item>
                <el-dialog :visible.sync="Visible">
                    <img :src="imgUrl" style="width: 100%;height: 50%" alt="">
                </el-dialog>
                <el-form-item>
                    <el-button type="primary" v-if="originImgUrl" @click="download">
                        下载图片
                        <i class="el-icon-download"></i>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: '', //上传图片路径
            Visible: false,/*压缩后图片预览*/

            img: {url: "", size: "", ratio: ""},
            imgUrl: "",
            originImgUrl: "",

            originSize: "", /*原本大小*/
            compressedSize: "" /*压缩后大小*/
        }
    },
    methods: {
        handleSuccess(response, file, fileList) {
            this.dialogImageUrl = "/api" + response.data
            this.img.url = response.data;
            console.log(this.img.url);
            this.$message.success("上传成功");

        },
        compress() {
            if (!this.img.url) {
                this.$message.warning("请先上传图片！！！")
            } else if (!this.img.size || !this.img.ratio) {
                this.$message.warning("请输入预期大小或压缩质量！！！")
            } else {
                if (confirm("确认压缩？")) {
                    this.axios.post("/api/image/compress", this.img).then((response) => {
                        console.log(response.data.data.url);
                        this.imgUrl = "/api" + response.data.data.url;
                        this.originImgUrl = response.data.data.url;

                        this.originSize = response.data.data.originSize;
                        this.compressedSize = response.data.data.size;
                    })
                    this.$message.success("压缩成功,请稍等...");

                }
            }
        },

        download() {
            if (this.originImgUrl) {
                this.axios({
                    url: `/api/image/download`,
                    method: `GET`,
                    responseType: `blob`,
                    params: {imageUrl: this.originImgUrl}
                })
                    .then((response) => {
                        const blob = new Blob([response.data]);
                        const link = document.createElement('a');
                        console.log(link);
                        link.style.display = 'none';
                        //获取图片的格式
                        const ext = this.imgUrl.substring(this.imgUrl.lastIndexOf("."));
                        //为图片设置一个随机名字
                        const fileName = Math.random().toString(36).substring(2, 15) + ext;
                        link.href = URL.createObjectURL(blob);
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    });
            }
        },

        handlePreview() {
            this.Visible = true;
        },
    },
}
</script>

<style>

.picture-uploader {
    float: left;
    width: 145px;
    height: 145px;
    margin-right: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.picture-uploader .picture-uploader-icon {
    width: 148px;
    height: 80px;
    font-size: 50px;
    color: #FFC200;
    line-height: 145px;
    text-align: center;
}

.app {
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.card {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 145px;
    height: 145px;
    border-radius: 10px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
}

.tip-button {
    border: none;
}

.tableBar > * {
    margin-right: 10px;
    /* 设置元素之间的右边距为 10 像素 */
}
</style>
